<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
    <meta name="renderer" content="webkit">
    <title></title>
    <link rel="stylesheet" href="__STATIC__/admin/css/pintuer.css">
    <link rel="stylesheet" href="__STATIC__/admin/css/admin.css">
    <script src="__STATIC__/admin/js/jquery.js"></script>
    <script src="__STATIC__/admin/js/pintuer.js"></script>
    <script src="__STATIC__/admin/plugin/webuploader/webuploader.js"></script>
    <link rel="stylesheet" href="__STATIC__/admin/plugin/webuploader/webuploader.css">
</head>
<body>
<div class="panel admin-panel">
    <div class="panel-head" id="add"><strong><span class="icon-pencil-square-o"></span>添加分类</strong></div>
    <div class="body-content">
        <form method="post" class="form-x" action="">
            <div class="form-group">
                <div class="label">
                    <label>分类：</label>
                </div>
                <div class="field">
                    <select name="catelog_id" class="input w50">
                        <{volist name="cates" id="vo"}>
                        <option value="<{$vo.id}>"><{$vo.name}></option>
                        <{/volist}>
                    </select>
                    <div class="tips"></div>
                </div>
            </div>
            <div class="form-group">
                <div class="label">
                    <label>标题：</label>
                </div>
                <div class="field">
                    <input type="text" class="input w50" value="" name="title" />
                    <div class="tips"></div>
                </div>
            </div>
            <div class="form-group">
                <div class="label">
                    <label>封面：</label>
                </div>
                <div class="field">
                    <input type="text" class="input w50" value="" name="thumb" class="input tips" style="width:25%;float:left;" data-toggle="hover" data-place="right" data-image=""/>
                    <input type="button" class="button bg-blue margin-left" id="image1" value="+ 浏览上传" style="float:left;">
                    <div class="tips" style="padding:13px;">图片尺寸:500*500</div>
                </div>
            </div>
            <div class="form-group">
                <div class="label">
                    <label>其他属性：</label>
                </div>
                <div class="field" style="padding-top:8px;">
                    首页 <input id="ishome"  type="radio"  value="1" name="style" checked="checked"/>
                    推荐 <input id="isvouch"  type="radio"  value="2"  name="style" />
                    置顶 <input id="istop"  type="radio"  value="3"  name="style"/>
                </div>
            </div>
            <div class="form-group">
                <div class="label">
                    <label>视频地址：</label>
                </div>
                <div style="overflow:hidden;">
                    <input type="text" id="url" name="url" class="input tips" style="width:30%;float:left;margin-right: 10px;line-height:15px;" value="" data-toggle="hover" data-place="right" data-image="" />
                    <div id="uploader" class="wu-example" style="width:500px;float:left;">
                        <div id="picker" class="margin-left">选择文件</div>
                    </div>
                </div>
                <div style="overflow:hidden">
                    <div class="filename" style="padding:5px 0px;"></div>
                    <div class="state" style="padding:5px 0px;"></div>
                    <div class="progress" style="margin:5px 0px;display:none;">
                        <div class="progress-bar progress-bar-info progress-bar-striped active" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width:0%;">
                            <span class="sr-only"></span>
                        </div>
                    </div>
                </div>
            </div>
            <div class="form-group">
                <div class="label">
                    <label>时长：</label>
                </div>
                <div class="field">
                    <input type="text" class="input w50" value="" name="duration" />
                    <div class="tips"></div>
                </div>
            </div>
            <div class="form-group">
                <div class="label">
                    <label>详情：</label>
                </div>
                <div class="field">
                    <textarea class="input" value="" name="content" ></textarea>
                    <div class="tips"></div>
                </div>
            </div>
            <div class="form-group">
                <div class="label">
                    <label></label>
                </div>
                <div class="field">
                    <button class="button bg-main icon-check-square-o" type="submit"> 提交</button>
                </div>
            </div>
        </form>
    </div>
</div>
<script>
    $(function(){//加载后才执行
        var GUID=WebUploader.Base.guid(); //生成GUID
        var uploader = WebUploader.create({
            //swf文件路径
            swf:'/static/admin/plugin/webuploader/Uploader.swf',
            server:'/admin/video/upload_chunk',//文件接收服务端
            pick:'#picker',//选择文件的按钮-可选,内部根据当前运行时创建,可能是input也可能是FLASH元素
            resize:false, //不压缩image,默认是JPEG,文件上传前会压缩一把在上传
            chunked:true,//开启芬片上传
            chunkSize:1*1024*1024,//每一片的大小是1M
            formData: {
                guid:GUID //自定义参数
            },
            method:'POST'
        })
        var $state = $('.state')
        var $name = $(".name")
        //当有文件被添加进队列的时候
        uploader.on('fileQueued',function(file){
            //$state.append('<font color="red">等待上传...</font>')
            $name.append(file.name)
            uploader.upload()
            $(".progress").show()
        })
        uploader.on('beforeUpload',function(file){
            console.log("文件准备上传:",file)
        })
        /*$("#ctlBtn").on("click",function(){//上传按钮添加上传事件
            return false;//之前如果没加return false,你点击提交按钮时相当于也点击了最下面的提交按钮,成功后它会刷新页面->进而造成不会执行后面的操作
        })*/
        //上传成功后,调用合并功能把切片文件合成一个文件
        uploader.on('uploadSuccess',function(file,response){
            console.log("分片上传成功:",response);
            if(response.isLastChunk){
                $.post('/admin/video/merge_chunks?XDEBUG_SESSION_START=15571',{guid:GUID,fileName:file.name},function(data){
                    $state.html('<font color="green">上传完成!</font>')
                    $("#uploader .progress-bar").width('0%')
                    $(".progress").hide()
                    var previewUrl = "/storage/" + file.name;
                    $("input[name='url']").val("/storage/" + file.name + '/playlist.m3u8');//将input框内容改成m3u8文件地址
                    $("#preview video").attr("src",previewUrl);//更新视频URL
                    $("#preview video").attr("autoplay","true");//直接播放
                    $("#preview").parent().show();
                })
            }
        })
        uploader.on('uploadError', function () {
            $(".progress-bar").width('0%');
            $(".progress").hide()
            $state.html("<font color='red'>上传失败...</font>");
        });//上传失败
        //文件上传过程中创建进度条实时显示
        uploader.on('uploadProgress',function(file, percentage){
            $(".progress-bar").width(percentage * 100 + '%')
            $state.html('<font color="blue">上传中......</font>')
            $(".sr-only").text(Math.ceil(percentage*100) + '%')
        })
    })
</script>
</body></html>